<template>
	<view class="container">
		<view class="form">
			<text class="title">登录</text>
			<input class="input" placeholder="请输入用户名" v-model="username" />
			<input class="input" placeholder="请输入密码" v-model="password" type="password" :focus="isPwdfocus"
				@blur="isPwdfocus = false" />
			<button class="btn" type="primary" @click="handleLogin">登录</button>
			<view class="link">
				<text>没有账号？</text>
				<navigator url="/pages/register/register">去注册</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: 'msy',
			password: '123456',
			isPwdfocus: true
		}
	},
	methods: {
		handleLogin() {
			if (!this.username || !this.password) {
				uni.showToast({
					title: '请输入完整信息',
					icon: 'none'
				})
				return
			}

			if (this.username) {
				    console.log("setStorage----->data:"+this.username);
					uni.setStorage({
						key:'userName',
						data:this.username,
						success:function(){
							console.log("setStorage 成功");
							
						}
					})
					// 登录成功后跳转
					uni.switchTab({
						url: "/pages/tabBar/tabcompage/tabcompage"
					})
				
			} else {
				uni.showToast({
					title: '用户名或密码错误',
					icon: 'none'
				});
				this.password='';
				this.isPwdfocus=true;
			}
		}
	}
}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: #f5f5f5;
}

.form {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 10rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	width: 90%;
	max-width: 550rpx;
}

.title {
	display: block;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.input {
	border: 1rpx solid #eee;
	border-radius: 5rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.btn {
	margin-top: 20rpx;
}

.link {
	text-align: center;
	margin-top: 20rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
}

.link navigator {
	color: #007AFF;
}
</style>
